<template>
  <div class="deliver-management">
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <el-form-item label="投递ID">
          <el-input v-model="filterForm.id" placeholder="请输入投递ID"></el-input>
        </el-form-item>
        <el-form-item label="投递状态">
          <el-select v-model="filterForm.deliverStatus" placeholder="请选择投递状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="投递中" :value="1"></el-option>
            <el-option label="面试中" :value="2"></el-option>
            <el-option label="已通过" :value="3"></el-option>
            <el-option label="没通过" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="职位名称" width="150"></el-table-column>
      <el-table-column prop="username" label="账号" width="150"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="createTime" label="投递时间" width="180"></el-table-column>
      <el-table-column prop="deliverStatus" label="投递状态" width="150">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.deliverStatus)">
            {{ getStatusText(scope.row.deliverStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleViewResume(scope.row)">查看简历</el-button>
          <el-button size="mini" type="success" @click="handleApprove(scope.row, scope.row.deliverStatus + 1)"
            :disabled="scope.row.deliverStatus == 4 || scope.row.deliverStatus == 3">通过</el-button>
          <el-button size="mini" type="danger" @click="handleReject(scope.row, 4)"
            :disabled="scope.row.deliverStatus == 4 || scope.row.deliverStatus == 3">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current"
        :page-sizes="[10, 20, 30, 50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <!-- 查看简历弹窗 -->
    <el-dialog title="简历详情" :visible.sync="resumeDialogVisible" width="60%">
      <div v-if="currentResume" class="resume-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ currentResume.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentResume.sex }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ currentResume.age }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ currentResume.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ currentResume.email }}</el-descriptions-item>
          <el-descriptions-item label="学历">{{ currentResume.education }}</el-descriptions-item>
          <el-descriptions-item label="学校">{{ currentResume.school }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ currentResume.major }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else class="no-resume">
        <el-empty description="暂无简历信息"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDeliverAdminList, getDeliverSubmit } from '@/api'
import { MessageBox } from 'element-ui'

export default {
  name: 'DeliverManagement',
  data() {
    return {
      filterForm: {
        id: '',
        deliverStatus: ''
      },
      tableData: [],
      loading: false,
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      resumeDialogVisible: false,
      currentResume: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getDeliverAdminList({
        ...this.filterForm,
        currPage: this.page.current,
        pageSize: this.page.size
      }).then(res => {
        this.tableData = res.data.list
        this.page.total = parseInt(res.data.total)
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    handleSearch() {
      this.page.current = 1
      this.getList()
    },
    handleReset() {
      this.filterForm = {
        jobName: '',
        status: ''
      }
      this.handleSearch()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.getList()
    },
    getStatusType(status) {
      const types = {
        1: 'warning',
        2: 'success',
        3: 'primary',
        4: 'danger',
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        1: '投递中',
        2: '面试中',
        3: '通过',
        4: '没通过'
      }
      return texts[status] || '未知'
    },
    handleApprove(row, status) {
      MessageBox.confirm('确认通过该投递申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeliverSubmit({
          id: row.deliverId,
          deliverStatus: status
        }).then(() => {
          this.$message.success('操作成功')
          this.getList()
        })
      }).catch(() => {
        // 用户点击取消按钮
      })
    },
    handleReject(row, status) {
      MessageBox.confirm('确认拒绝该投递申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeliverSubmit({
          id: row.deliverId,
          deliverStatus: status
        }).then(() => {
          this.$message.success('操作成功')
          this.getList()
        })
      }).catch(() => {
        // 用户点击取消按钮
        this.$message.info('已取消操作')
      })
    },
    handleViewResume(row) {
      this.currentResume = row.resume
      this.resumeDialogVisible = true
    }
  }
}
</script>

<style scoped>
.deliver-management {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.resume-content {
  padding: 20px;
}

.resume-section {
  margin-top: 20px;
}

.resume-section h3 {
  margin-bottom: 10px;
  font-weight: bold;
  color: #303133;
}

.resume-section p {
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
}

.no-resume {
  padding: 40px 0;
}
</style>